<template>
  <div
    class="FullScreenSuper"
    :style="`background-image: url('${pic.imgurl1}');`"
  >
    <div class="layout-container">
      <Nav :main-color="mainColor" />

      <div class="FullScreenSuper-container">
        <div class="FullScreenSuper-order">
          <div class="FullScreenSuper-tip FullScreenSuper-tip-before">
            <div>
              <span>
                累计执行排名
              </span>
            </div>
          </div>

          <div
            class="FullScreenSuper-order-container border-gradient-blue"
            :style="`background-image: url('${pic.imgurl2}');`"
          >
            <VEcharts
              autoresize
              :options="optsLeft"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>

        <div class="FullScreenSuper-defail">
          <div class="right_top">
            <div class="FullScreenSuper-tip FullScreenSuper-tip-before">
              <div>
                <span>
                  分析
                </span>
              </div>
            </div>
            <div class="top_list">
              <div
                v-for="(item, index) in topList"
                :key="index"
                class="btn_list"
                :style="`background-image: url('${pic.imgurl3}');`"
              >
                <p>{{ item.text }}</p>
                <span>{{ item.num }}</span>
              </div>
            </div>
          </div>
          <div class="right_mid">
            <div class="FullScreenSuper-tip FullScreenSuper-tip-before">
              <div>
                <span>
                  分月增长率
                </span>
              </div>
            </div>
            <div class="mid_box">
              <div class="mid_left">
                <!-- <div class="tilte">
                  <div class="title_before" />
                  <span>四本预算收入分析</span>
                </div> -->
                <div
                  class="mid_left_tu"
                  :style="`background-image: url('${pic.imgurl4}')`"
                >
                  <VEcharts
                    autoresize
                    :options="optszheXian"
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div>
              <!-- <div class="mid_center">
                <div class="tilte">
                  <div class="title_before" />
                  <span>总体收入进度</span>
                </div>
                <div class="mid_center_tu">
                  <VEcharts
                    autoresize
                    :options="optsMid_zhu"
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div>
              <div class="mid_right">
                <div class="tilte">
                  <div class="title_before" />
                  <span>主要税种收入分析</span>
                </div>
                <div class="mid_right_tu">
                  <VEcharts
                    autoresize
                    :options="optsMid_zhe"
                    style="width: 100%; height: 100%"
                  />
                </div>
              </div> -->
            </div>
          </div>
          <div class="right_bot">
            <div class="FullScreenSuper-tip FullScreenSuper-tip-before">
              <div>
                <span>
                  增长率对比
                </span>
              </div>
            </div>
            <div
              class="bot_zhu"
              :style="`background-image: url('${pic.imgurl5}');`"
            >
              <VEcharts
                autoresize
                :options="optsMid_Bot"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Nav from '@/views/supervisionFund/components/Nav';
import VEcharts from '@/components/vecharts';
import {
  getQueryBodyByProduce
} from '@/api/dynamicInterface';
export default {
  components: { Nav, VEcharts },

  data() {
    return {
      mainColor: '#1890FF',
      topList: [{
        text: '累计执行(万元)',
        num: ''
      }, {
        text: '上年同期(万元)',
        num: ''
      }, {
        text: '增长额(万元)',
        num: ''
      }, {
        text: '增长率(%)',
        num: ''
      }],
      progressList: [
        {
          title: '资金使用率',
          num: 68,
          color: '#02D4D4'
        },
        {
          title: '项目完成度',
          num: 68,
          color: '#FF535C'

        },
        {
          title: '资金使用率',
          num: 68,
          color: '#02D4D4'

        },
        {
          title: '项目完成度',
          num: 68,
          color: '#02D4D4'

        }
      ],
      left_List: {
        ENTERPRISENAME: [],
        SZ_LJZH: []
      },
      zhe_List: {
        YF: [],
        VAL: []
      },
      zhuZhe_List: {
        ENTERPRISENAME: [],
        SZ_ZCL: [],
        SZ_ZCE: []
      },
      left_listFu: {
        ENTERPRISENAME: [],
        SZ_LJZH: []
      },
      timer: null,
      pic: {
        imgurl1: require('@/assets/images/fullscreen/bg.png'),
        imgurl2: require('@/assets/images/fullscreen/border1.png'),
        imgurl3: require('@/assets/images/fullscreen/矩形.png'),
        imgurl4: require('@/assets/images/fullscreen/路径备份.png'),
        imgurl5: require('@/assets/images/fullscreen/路径备份.png')
      },
      mouth: '',
      year: localStorage.getItem('chooseYear'),
      mapData: {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
        10: '十',
        11: '十一',
        12: '十二'
      }
    };
  },
  computed: {
    optsLeft() {
      const newArr = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   data: ["预算数", "已拨付"],
        // },
        grid: {
          left: '4%',
          right: '16%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.65)'
            }
          },
          textStyle: {
            fontSize: '18'
          },

          type: 'category',
          data: this.left_List.ENTERPRISENAME
        },
        series: [
          {
            name: '累积执行',
            type: 'bar',
            data: this.left_List.SZ_LJZH,
            itemStyle: {
              normal: {
                color: '#29EAFF',
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#29EAFF'
                  }
                }
              }
            }
          }
          // {
          //   name: "已拨付",
          //   type: "bar",
          //   data: [45, 58, 20, 28, 45, 23, 52, 60, 30, 10, 62, 70, 61, 13],
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: "#93eed2",
          //         },
          //         {
          //           offset: 1,
          //           color: "#5ad8a6",
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      };
      return newArr;
    },
    // optsMid_zhu() {
    //   const newArr = {
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     grid: {
    //       left: '4%',
    //       right: '4%',
    //       bottom: '6%',
    //       top: '6%',
    //       containLabel: true
    //     },
    //     // legend: {
    //     //   data: ["预算数", "已拨付"],
    //     // },
    //     xAxis: {
    //       show: true,
    //       // type: 'value',
    //       // boundaryGap: [0, 0.01],

    //       axisLine: {
    //         lineStyle: {
    //           color: '#32c5ff'
    //         }
    //       },
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sat', 'Sun', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //       show: true,
    //       axisTick: {
    //         show: false
    //       },
    //       textStyle: {
    //         fontSize: '18'
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: 'rgba(255,255,255,0.45)'
    //         }
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: ['rgba(255,255,255,0.45)'],
    //           width: 1,
    //           type: 'solid'
    //         }
    //       }

    //     },
    //     series: [
    //       {
    //         name: '预算数',
    //         type: 'bar',
    //         data: [10, 20, 30, 40, 50, 60, 20, 30, 40, 50, 60],
    //         itemStyle: {
    //           normal: {
    //             color: '#e9d500'
    //           }
    //         }
    //       }

    //     ]
    //   };
    //   return newArr;
    // },
    // optsMid_zhe() {
    //   const newArr = {
    //     legend: {
    //       data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
    //       x: 'left',
    //       y: '7%',
    //       textStyle: { color: 'rgba(255,255,255,0.65)' }
    //     },
    //     tooltip: {
    //       trigger: 'axis'
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {}
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    //       axisLine: {
    //         lineStyle: {
    //           color: '#32c5ff'
    //         }
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLine: {
    //         lineStyle: {
    //           color: 'rgba(255,255,255,0.45)'
    //         }
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: ['rgba(255,255,255,0.45)'],
    //           width: 1,
    //           type: 'solid'
    //         }
    //       }
    //     },
    //     series: [
    //       {
    //         name: '邮件营销',
    //         type: 'line',
    //         stack: '总量',
    //         data: [120, 132, 101, 134, 90, 230, 210]
    //       },
    //       {
    //         name: '联盟广告',
    //         type: 'line',
    //         stack: '总量',
    //         data: [220, 182, 191, 234, 290, 330, 310]
    //       },
    //       {
    //         name: '视频广告',
    //         type: 'line',
    //         stack: '总量',
    //         data: [150, 232, 201, 154, 190, 330, 410]
    //       },
    //       {
    //         name: '直接访问',
    //         type: 'line',
    //         stack: '总量',
    //         data: [320, 332, 301, 334, 390, 330, 320]
    //       },
    //       {
    //         name: '搜索引擎',
    //         type: 'line',
    //         stack: '总量',
    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
    //       }
    //     ]
    //   };
    //   return newArr;
    // },
    optsMid_Bot() {
      const newArr = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '6%',
          top: '6%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.zhuZhe_List.ENTERPRISENAME,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              lineStyle: {
                color: '#02d4d4'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '增长额',
            min: -30000,
            max: 30000,
            interval: 10000,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.45)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.45)'
              }
            }
          },
          {
            type: 'value',
            name: '增长率',
            min: -210,
            max: 210,
            interval: 70,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.45)'
              }
            },
            axisLabel: {
              formatter: '{value}%'
            },
            splitLine: {
              show: false,
              lineStyle: {
                // type: 'dashed',
                // color: 'rgba(255,255,255,0.45)'
              }
            }
          }
        ],
        series: [
          {
            name: '增长额',
            type: 'bar',
            data: this.zhuZhe_List.SZ_ZCE,
            label: {
              show: true,
              position: 'bottom',
              color: '#02d4d4'
            },
            itemStyle: {
              normal: {
                color: '#02d4d4'
              }
            }
          },
          {
            name: '增长率',
            type: 'line',
            yAxisIndex: 1,
            data: this.zhuZhe_List.SZ_ZCL,
            label: {
              show: true,
              position: 'top',
              color: '#e9d500'
            },
            itemStyle: {
              normal: {
                color: '#e9d500'
              }
            },
            lineStyle: {
              color: '#e9d500',
              width: 4
            }
          }
        ]
      };
      return newArr;
    },
    optszheXian() {
      const newArr = {
        xAxis: {
          type: 'category',
          data: this.zhe_List.YF,

          axisLine: {
            lineStyle: {
              color: '#32c5ff'
            }
          }

        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.45)'
            }
          },
          axisLabel: {
            formatter: '{value} %'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.45)'
            }
          }
        },
        series: [{
          data: this.zhe_List.VAL,
          type: 'line',
          label: {
            show: true,
            position: 'top',
            color: '#e9d500'
          },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,0.45)'
            }
          },
          lineStyle: {
            color: '#e9d500',
            width: 4
          }
        }]
      };
      return newArr;
    }
  },
  created() {
    this.getNowDate();
    this.$nextTick(() => {
      this.initPage();
    });
    this.getLeft();
    this.getZhe();
  },
  // mounted() {
  //   this.timer = setTimeout(() => {
  //     // this.left_list.tx=[]
  //     // this.left_List.ENTERPRISENAME = [];
  //     this.left_List.SZ_LJZH = [];
  //     // this.getleft();
  //     setTimeout(() => {
  //       // this.left_List.ENTERPRISENAME = this.left_listFu.ENTERPRISENAME;
  //       this.left_List.SZ_LJZH = this.left_listFu.SZ_LJZH;
  //     }, 1000);
  //   }, 2000);
  // },
  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer);
  },
  methods: {
    getNowDate() {
      const date = new Date();
      this.mouth = date.getMonth();
      if (this.mouth < 10) {
        this.mouth = '0' + this.mouth;
      }
    },
    initPage() {
      const fullScreenSuper = document.querySelector('.FullScreenSuper');
      fullScreenSuper.style.setProperty('--full-screen-main-color', this.mainColor);
    },
    getLeft() {
      getQueryBodyByProduce({
        filterList: [{ col: 'YF', value: `${this.year}-${this.mouth}` }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 496
      }).then(res => {
        let ljNum = 0;
        let snNum = 0;
        let zzNum = 0;
        res.data.forEach(item => {
          this.zhuZhe_List.ENTERPRISENAME.push(item.ENTERPRISENAME.slice(0, 2));
          this.zhuZhe_List.SZ_ZCL.push(item.SZ_ZCL.split('%')[0]);
          this.zhuZhe_List.SZ_ZCE.push(item.SZ_ZCE);
        });
        res.data.sort((a, b) => {
          return (+a.SZ_LJZH) - (+b.SZ_LJZH);
        });
        res.data.forEach(item => {
          this.left_List.ENTERPRISENAME.push(item.ENTERPRISENAME.slice(0, 2));
          this.left_List.SZ_LJZH.push(item.SZ_LJZH);
          ljNum = +item.SZ_LJZH + ljNum;
          snNum = +item.SZ_SNTQ + snNum;
          zzNum = +item.SZ_ZCE + zzNum;
        });
        this.left_listFu.ENTERPRISENAME = this.left_List.ENTERPRISENAME;
        this.left_listFu.SZ_LJZH = this.left_List.SZ_LJZH;
        this.topList[0].num = ljNum.toFixed(2);
        this.topList[1].num = snNum.toFixed(2);
        this.topList[2].num = zzNum.toFixed(2);
        this.topList[3].num = (zzNum / snNum * 100).toFixed(2);
      });
    },
    getZhe() {
      getQueryBodyByProduce({
        filterList: [{ col: 'YF', value: `${this.year}-${this.mouth}`, symbol: 'lte' }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 594
      }).then(res => {
        res.data.forEach((item) => {
          this.zhe_List.YF.push(this.mapData[item.YF] + '月');
          this.zhe_List.VAL.push(item.SZ_ZCL.split('%')[0]);
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.FullScreenSuper {
  $full-screen-main-color: var(--full-screen-main-color, #1890ff);
  $full-screen-left-width: 430px;
  $full-screen-gap-width: 24px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: PingFangSC, PingFangSC-Medium;

  .layout-container {
    width: 100%;
    height: 100%;
    padding: 0 $full-screen-gap-width;
    display: flex;
    flex-direction: column;

    .FullScreenSuper-container {
      height: 91.5%;
      padding-bottom: $full-screen-gap-width / 2;
      // margin-top: $full-screen-gap-width / 2;
      display: flex;

      .FullScreenSuper-order {
        width: 23%;
        display: flex;
        flex-direction: column;

        .FullScreenSuper-order-container {
          height: calc(100% - 56px);
          margin-top: $full-screen-gap-width / 2;
          position: relative;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .FullScreenSuper-defail {
        width: 77%;
        margin-left: $full-screen-gap-width;
        .right_top {
          width: 100%;
          height: 15%;
          .top_list {
            height: calc(100% - 44px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .btn_list {
              width: 23%;
              height: 80%;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              p {
                color: #4ca7ed;
                margin: 0;
              }
              span {
                color: #e9d500;
                font-size: px2vw(36px);
              }
            }
          }
        }
        .right_mid {
          height: 46%;
          .tilte {
            display: flex;
            align-items: center;
            height: 65px;
            span {
              color: #ffffff;
            }
          }
          .mid_box {
            height: calc(100% - 44px);
            display: flex;
            // padding-bottom: 24px;
            justify-content: space-between;
            width: 100%;
            .mid_center_tu,
            .mid_right_tu {
              width: 100%;
              height: calc(100% - 65px);
              background: url("~@/assets/images/fullscreen/路径备份.png")
                no-repeat;
              background-size: 100% 100%;
            }
            .mid_left {
              width: 100%;
              height: 100%;
              .mid_left_tu {
                margin-top: 1.5%;
                height: 87%;
                // display: flex;
                // justify-content: space-between;
                // align-content: space-between;
                // flex-wrap: wrap;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                // .left_bingtu {
                //   width: 45%;
                //   height: 45%;
                //   background: url("~@/assets/images/fullscreen/矩形 (1).png")
                //     no-repeat;
                //   background-size: 100% 100%;
                //   display: flex;
                //   justify-content: center;
                //   align-items: center;
                //   flex-direction: column;
                //   p {
                //     color: #4ca7ed;
                //     font-size: px2vw(16px);
                //     margin: 0;
                //     height: 20%;
                //   }
                // }
              }
            }
            .mid_center {
              width: 40%;
              height: 100%;
            }
            .mid_right {
              width: 40%;
            }
          }
        }
        .right_bot {
          height: 39%;
          .bot_zhu {
            margin-top: 20px;
            height: calc(100% - 64px);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .border {
    width: 100%;
    height: 100%;
  }

  .FullScreenSuper-tip {
    height: 44px;
    color: #ffffff;
    font-size: px2vw(18px);
    display: flex;
    > div {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      > span {
        padding: 10px;
      }
      background: linear-gradient(
        90deg,
        rgba(24, 144, 255, 0.5),
        rgba(0, 0, 0, 0)
      );
    }

    &.FullScreenSuper-tip-before {
      &::before {
        content: "";
        display: inline-block;
        height: 100%;
        width: 10px;
        background-color: $full-screen-main-color;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
}
.title_before {
  width: 6px;
  height: 34px;
  opacity: 1;
  background: #1890ff;
  border-radius: 1px;
  margin-right: 8px;
}
/deep/.el-progress,
/deep/.el-progress-circle {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
}
.left_bingtu /deep/.el-progress__text {
  color: #e9d500;
  font-size: px2vw(16px) !important;
}
.left_bingtu:nth-of-type(2) /deep/.el-progress__text {
  color: #ff535c;
  font-size: px2vw(16px) !important;
}
</style>
